<template>
  <div class="recommend" ref="container">
    <!-- <div class="title acea-row row-center-wrapper">
      <span class="iconfont icon-zhuangshixian"></span>
      <span class="name">为你推荐</span>
      <span class="iconfont icon-zhuangshixian lefticon"></span>
    </div> -->
    <div class="title acea-row row-center-wrapper title" ref="title">
      <div class="line"></div>
      <div class="name">为你推荐</div>
      <div class="line"></div>
    </div>
    <div class="recommendList acea-row row-between-wrapper">
      <div
        @click="$router.push({ path: '/pages/shop/GoodsCon/index',query:{id:item.id} })"
        class="item"
        v-for="(item, recommendIndex) in hostProduct"
        :key="recommendIndex"
      >
        <div class="pictrue">
          <img :src="item.image" class="image" />
        </div>
        <div class="name line1">{{ item.storeName }}</div>
        <div class="money font-color-red">
          ￥
          <span class="num">{{ item.price }}</span>
        </div>
      </div>
    </div>
    <loading-tip :loaded="loadend" :loading="loading" v-if="hostProduct.length>5"></loading-tip>
  </div>
</template>
<script>
import { getHostProducts } from "@/api/store";
import loadingTip from "@/components/Loading";
export default {
  name: "Recommend",
  props: {},
  components: {
    loadingTip
  },
  data: function() {
    return {
      hostProduct: [],
      page: 1,
      limit: 20,
      loadTitle: "",
      loading: false,
      loadend: false
    };
  },
  mounted: function() {
    this.hostProducts();
  },
  methods: {
    hostProducts: function() {
      let that = this;
      if (that.loading) return; //阻止下次请求（false可以进行请求）；
      if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
      that.loading = true;
      getHostProducts(that.page, that.limit).then(res => {
        that.loading = false;
        //apply();js将一个数组插入另一个数组;
        that.hostProduct.push.apply(that.hostProduct, res.data);
        that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
        that.page = that.page + 1;
        console.log("看看有没有为你推荐",that.hostProduct)
      });
    }
  },
  onReachBottom() {
    !this.loading && this.hostProducts();
  }
};
</script>
<style lang="less" scoped>
.recommend{
  height: 0.8rem;
}
.title{
	height:80rpx;
	font-size:30rpx;
	display:flex;
	justify-content:center;
	align-items:center;
	.line{
		width:100rpx;
	}
	.name{
		height:100%;
		width:100rpx;
		display:flex;
		align-items:center;
		justify-content:center;
		font-size:24rpx !important;
	}
}

.recommend .title .line {
  width: 1rem;
  height: 0.02rem;
  background-color: #999999;
}

.recommend .title .name {
  font-size: 0.28rem;
  color: #333333;
  margin: 0 0.3rem;
  font-weight: bold;
}
</style>

